<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:x="http://java.sun.com/jstl/xml">

	<h:head>
		<title>Globallogic vacation planner 1.0</title>
		<link rel="stylesheet" type="text/css" href="css/container.css" />
	</h:head>

	<h:body>
		<div class="container">
			<center>
				<h2>Registration page</h2>
			</center>
			<h:form>
				<center>
					<rich:panel header="User information" style="width:500px">
						<h:panelGrid columns="4">

							<!-- Login -->
							<h:outputText value="Login:" />
							<h:inputText value="#{userBean.login}" id="login"
								validatorMessage="Login must be for 3 to 8 characters length">
								<f:validateLength minimum="3" maximum="8" />
								<f:validateRequired />
								<rich:validator />
							</h:inputText>
							<rich:message for="login" />

							<!-- Password -->
							<h:outputText value="Password:" />
							<h:inputSecret value="#{userBean.password}" id="password"
								validatorMessage="Password must be for 5 to 15 characters length">
								<f:validateLength minimum="5" maximum="15" />
								<f:validateRequired />
								<rich:validator />
							</h:inputSecret>
							<rich:message for="password" />

							<!-- Confirm password -->
							<h:outputText value="Confirm password" />
							<h:inputSecret value="#{userBean.confirmPassword}"
								id="confirmPassword"
								validatorMessage="Password must be for 5 to 15 characters length">
								<f:validateLength minimum="5" maximum="15" />
								<f:validateRequired />
								<rich:validator />
							</h:inputSecret>
							<rich:message for="confirmPassword" />

							<!-- User name -->
							<h:outputText value="Name:" />
							<h:inputText value="#{userBean.userName}" id="name"
								validatorMessage="You must input yor name">
								<f:validateLength minimum="1" />
								<f:validateRequired />
								<rich:validator />
							</h:inputText>
							<rich:message for="name" />

							<!-- User surname -->
							<h:outputText value="Surname" />
							<h:inputText value="#{userBean.surname}" id="surname"
								validatorMessage="You must input yor surname">
								<f:validateLength minimum="1" />
								<f:validateRequired />
								<rich:validator />
							</h:inputText>
							<rich:message for="surname" />

							<!-- Email -->
							<h:outputText value="Email" />
							<h:inputText value="#{userBean.email}" id="email"
								validatorMessage="Invalid email address">
								<f:validateRegex
									pattern="^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$"></f:validateRegex>
								<rich:validator />
							</h:inputText>
							<rich:message for="email" />

						</h:panelGrid>

						<h:panelGrid columns="2">
							<a4j:commandButton action="#{userBean.register}" value="register"
								style="height: 20px; width: 100px" />
						</h:panelGrid>

					</rich:panel>
					<c:if test="#{not empty userBean.registrationMessage}">
						<h3>
							<font color="red">#{userBean.registrationMessage}</font>
						</h3>
					</c:if>
				</center>
			</h:form>
			<center>
				<c:if test="#{not empty userBean.loginError}">
					<h3>
						<font color="red">#{userBean.loginError}</font>
					</h3>
				</c:if>
			</center>
		</div>
	</h:body>
</ui:composition>